import { Button, Empty, Space, Radio, Checkbox, InputNumber, Table, Menu, Tabs } from 'antd';
import { useState, useEffect, useContext } from 'react'
import { fromCircle } from 'ol/geom/Polygon';
import ScrollTable from '../../../../../../common/ScrollTable';
import JzzyApi from '../../../../../../../utils/apis/JzzyApi';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import { drawCircle, wktToGeom } from '../../../../../../../utils/helper/mapHelper';
import ZhpgContext from '../../ZhpgContext';
import _ from 'lodash';
import rangeDisplayIcon from '../../../Jcyj/rangeDisplayIcon';
export default function Children(props) {
    const { item } = props;
    const { zhData } = useContext(ZhpgContext);
    const map = useBusinessMap();
    const [radius, setRadius] = useState();
    const [datas, setDatas] = useState();
    const [loading, setLoading] = useState();

    const [onChange] = useState(() => {
        return props.onChange;
    })

    const handleButtonClick = (record) => {
        //console.log('1',jzzyList);
        // setXqzt(2);
        // setYxfxxq([record, jzzyList]);
        // setZhjcData({ radius: radius, datas: jzzyList })
    }

    useEffect(() => {
        if (map && radius && zhData && item) {
            const center = wktToGeom(zhData.geom).getCoordinates();
            const circle = drawCircle(map, center, radius);
            setLoading(true)
            JzzyApi.listByPolygon(fromCircle(circle)).then(resp => {
                const datas = resp.data?.filter(d => {
                    return item.filter?.(d);
                })
                setDatas(datas);
                onChange({
                    radius,
                    count: _.sumBy(datas, 'count'),
                });
            }).finally(e => {
                setLoading(false)
            })

        }
    }, [map, radius, zhData, item, onChange])

    // console.log('datas',datas)

    const [type, setType] = useState('jzzypg');
    useEffect(() => {
        if (radius && map && datas) {
            const data = datas? datas.map(item => ({ name: item?.name })) : [];
            const center = wktToGeom(zhData.geom).getCoordinates();
            const circle = drawCircle(map, center, radius);
            rangeDisplayIcon(data, circle, map, type,'nowkt');
            return () => {
                const allLayers = map.getLayers().getArray();
                [...allLayers].forEach(l => {
                    if (l?.get("layerName") === 'rangeDisplayIcon')
                        map.removeLayer(l);
                })
            }
        }
    }, [map, type, zhData, radius,datas])



    return <>
        <Space>
            <Radio.Group size='small' value={radius} onChange={e => {
                console.log("props", props);
                setRadius(e.target.value)
            }} buttonStyle="solid">
                <Radio.Button value={5}>5km</Radio.Button>
                <Radio.Button value={10}>10km</Radio.Button>
                <Radio.Button value={15}>15km</Radio.Button>
                <Radio.Button value={20}>20km</Radio.Button>
            </Radio.Group>

            <InputNumber size='small' placeholder='其它数值' addonAfter={"km"} style={{
                width: 120
            }} onChange={value => {
                setRadius(value)
            }} />
        </Space>
        <ScrollTable size={"small"} columns={[{
            title: '名称',
            dataIndex: 'name'
        }, {
            title: '数量',
            dataIndex: 'count',
            align: "right",
            render: (text) => {
                return text + '处'
            }
        }, {
            render: (text, record) => {
                return <Button type="link" size="small" style={{
                    padding: 0
                }} onClick={() => {
                    
                    props.onDetail?.({ record, radius, xqzt: 2 })
                    
                }}>详情</Button>
            }
        }]}
            loading={loading}
            dataSource={datas} />


    </>
}